<template>
    <div>
      <img :src="tempData.face" class="prev_img" alt="">
      <qrcode id="23" style="position: absolute;top:0;left:0;opacity:0;" size=100 :value="person_home" type="img"></qrcode>
      <div class="prev_btn" @click="toTemplat()">立即使用</div>
      <canvas id="myCanvas" style="display: none" ></canvas>
      <qrcode-vue id='qrcodem' :value="value" size="100" class="qr_box" level="H" style="display: none;"></qrcode-vue>

      <div id="tests"></div>

    </div>
</template>
<script type='text/ecmascript-6'>
  import t from './../../api/public'
  import $ from 'jquery'
  import { Qrcode } from 'vux'

  // window.onload = function () {
  //   t.myStorage.setLocal('img_base64', $('#23 img')[0].currentSrc)
  // }

  export default {
    components: {
      Qrcode
    },
    data () {
      return {
        tid: 0,
        tempData: [],
        current_image: '',
        person_home: '',
        value: '',
        test: ''
      }
    },
    mounted () {
      this.person_home = t.myStorage.getLocal('person_home')
      document.title = '海报预览'
      // t.myStorage.setLocal('openid', 'osqwMwJKvlJbgt6tAf1sGDLF063o')
      let that = this
      this.tid = document.location.href.split('#')[1].split('/')[3]
      t.xhr.getPost({
        siteId: 1,
        act: 'home/poster/posterinfo',
        data: {
          id: this.tid
        }
      }, function (data) {
        t.l(data)
        that.tempData = data.data.temp[0]
        that.current_image = data.data.temp[0].image

        t.myStorage.setLocal('img_base64', $('#23 img')[0].currentSrc)

      })
    },
    methods: {
      toTemplat () {
        if (this.tempData.mid === 17) {
          this.$router.push('/poster/templat1/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 19) {
          this.$router.push('/poster/templat2/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 39) {
          this.$router.push('/poster/templat6/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        
        if (this.tempData.mid === 36) {
          this.$router.push('/poster/templat5/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 38) {
          this.$router.push('/poster/templat4/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 40) {
  
          this.$router.push('/poster/template1/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 49) {
  
          this.$router.push('/poster/template2/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 50) {
  
          this.$router.push('/poster/template3/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }

        if (this.tempData.mid === 51) {
  
          this.$router.push('/poster/template4/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }

        if (this.tempData.mid === 52) {
  
          this.$router.push('/poster/template5/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 53) {
  
          this.$router.push('/poster/template6/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        if (this.tempData.mid === 54) {
  
          this.$router.push('/poster/template7/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
        
        if (this.tempData.mid === null) {
          this.$router.push('/poster/mian/' + this.tid + '/userid/' + t.myStorage.getLocal('openid'))
        }
      },
      canvas2img () {
        let that = this;
        var mcanvas = document.getElementById('myCanvas')
        t.myStorage.setLocal('c_img', that.current_image)
        var cxt = mcanvas.getContext('2d')
        mcanvas.width = 750
        mcanvas.height = 1110

        that.preImage(that.current_image,function(x,y,width,height){   
          cxt.drawImage(this,x,y,width,height);   
          that.preImage(t.myStorage.getLocal('img_base64'),function(x,y,width,height){   
            cxt.fillStyle = '#ffffff'
            cxt.fillRect(750 / 2 - 60, 1110 - 160, 120, 140)
            cxt.drawImage(this,x,y,width,height);   
            cxt.fillStyle = '#000000'
            cxt.font = 'normal normal normal 16px Arial'
            cxt.fillText('扫我让你更美', 736 / 2 - 40, 1110 - 25)
          },{"x": 750 / 2 - 55, "y": 1110 - 150, "width" :110  ,"height" :110});
        },{"x": 0, "y": 0, "width" :750  ,"height" :1110});
      },

      preImage(url,callback,wo){
        var img = new Image(); //创建一个Image对象，实现图片的预下载    
        img.src = url;        
        if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数    
          callback.call(img,wo.x,wo.y,wo.width,wo.height);    
          return; // 直接返回，不用再处理onload事件    
        }     
        img.onload = function () { //图片下载完毕时异步调用callback函数。    
          callback.call(img,wo.x,wo.y,wo.width,wo.height);//将回调函数的this替换为Image对象    
        };    
      },
    }
  }
</script>
<style>
  .prev_img {
    display: block;
    width: calc(100% - 20px);
    margin: 0px auto;
    margin-top: 10px;
  }

  .prev_btn {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #ffffff;
  }
  .qr_box {
    position: absolute;
    bottom: 60px;
  }
</style>
